'use client'
import dynamic from 'next/dynamic'
import { useRequest } from 'ahooks'
import { Button, Flex } from 'antd'
import JSONPretty from 'react-json-pretty'
import { expiredToken, getHomeData, getUserInfo, logoutOut } from './request'
import { deleteUserToken } from '@/utils'

import 'react-json-pretty/themes/monikai.css'
import styles from './page.module.css'
import { useEffect, useState } from 'react'

function Home() {
  const [currentToken, setCurrentToken] = useState<string | null>(localStorage.getItem('user-token'))
  // 获取首页数据
  const {
    data: homeData = '',
    loading: homeLoading,
    run: getHomeDataManual,
    mutate: clearHomeData
  } = useRequest(getHomeData, { refreshDeps: [], manual: true })

  // 获取用户信息数据
  const {
    data: userInfo = undefined,
    loading: userLoading,
    run: getUserDataManual,
    mutate: clearUserData
  } = useRequest(getUserInfo, { refreshDeps: [], manual: true })

  // 获取用户信息数据
  const {
    data: logOutInfo = undefined,
    loading: logoutLoading,
    run: userLogout,
    mutate: clearLogOutInfo
  } = useRequest(logoutOut, { refreshDeps: [], manual: true })

  // 获取用户信息数据
  const {
    data: tokenExpireInfo = undefined,
    loading: tokenExpireLoading,
    run: userTokenExpire,
    mutate: clearTokenExpireInfo
  } = useRequest(expiredToken, { refreshDeps: [], manual: true })

  useEffect(() => {
    setCurrentToken(localStorage.getItem('user-token'))
  }, [homeLoading, userLoading, logoutLoading, tokenExpireLoading])

  return (
    <div className={styles.page}>
      <h2 className={styles.header1}>用户登录与单Token认证演示</h2>
      <Flex className={styles.demo} gap={20}>
        <div className={styles.sceneList}>
          <h3 className={styles.header}>场景一：无需认证请求</h3>
          <Button.Group>
            <Button type="primary" loading={homeLoading} onClick={getHomeDataManual}>
              获取首页数据
            </Button>
            <Button type="default" onClick={() => clearHomeData(undefined)}>
              清空数据
            </Button>
          </Button.Group>
          <div className={styles.reqData}>
            <span className={styles.dataTitle}>返回数据：</span>
            <div className={styles.dataContent}>{homeData && <JSONPretty data={homeData} />}</div>
          </div>
          <h3 className={styles.header}>场景二：需认证请求</h3>
          <Button.Group>
            <Button type="primary" loading={userLoading} onClick={getUserDataManual}>
              获取用户信息
            </Button>
            <Button type="default" onClick={() => clearUserData(undefined)}>
              清空数据
            </Button>
          </Button.Group>
          <div className={styles.reqData}>
            <span className={styles.dataTitle}>返回数据：</span>
            <div className={styles.dataContent}>{userInfo && <JSONPretty data={userInfo} />}</div>
          </div>
          <h3 className={styles.header}>场景三：清除Token</h3>
          <Button.Group>
            <Button
              type="primary"
              onClick={() => {
                deleteUserToken()
                setCurrentToken(null)
              }}>
              清除本地Token
            </Button>
            <Button loading={tokenExpireLoading} onClick={userTokenExpire}>
              当前Token过期
            </Button>
            <Button color="default" variant="filled" onClick={() => clearTokenExpireInfo(undefined)}>
              清空数据
            </Button>
          </Button.Group>
          <div className={styles.reqData}>
            <span className={styles.dataTitle}>返回数据：</span>
            <div className={styles.dataContent}>{tokenExpireInfo && <JSONPretty data={tokenExpireInfo} />}</div>
          </div>
          <h3 className={styles.header}>场景四：退出登录</h3>
          <Button.Group>
            <Button type="primary" onClick={userLogout} loading={logoutLoading}>
              退出登录
            </Button>
            <Button type="default" onClick={() => clearLogOutInfo(undefined)}>
              清空数据
            </Button>
          </Button.Group>
          <div className={styles.reqData}>
            <span className={styles.dataTitle}>返回数据：</span>
            <div className={styles.dataContent}>{logOutInfo && <JSONPretty data={logOutInfo} />}</div>
          </div>
          <div className={styles.tooltip}>
            注：正常退出登录应当是请求完成清空本地缓存后跳转到登录页面，此处为了演示效果，暂不跳转~
          </div>
        </div>
        <div className={styles.currentToken}>
          <h3 className={styles.header}>当前Token：</h3>
          <div className={styles.tokenValue}>{currentToken}</div>
        </div>
      </Flex>
    </div>
  )
}

export default dynamic(() => Promise.resolve(Home), { ssr: false })
